<template>
  <div class="buttons">
    <el-button text @click="dialogFormVisible=true,dialogTitle='保存草稿'">保存草稿</el-button>
    <el-button text type="success" @click="dialogFormVisible=true">发布</el-button>
  </div>
  <vue3-tinymce v-model="article.content" :setting="setting" />
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle"  width="30%" >
    <el-form :model="article">
      <el-form-item label="设置标题" >
        <el-input v-model.trim="article.title" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="publish">
          确认更改
        </el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script setup>
import { reactive ,ref} from 'vue';
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
import {ElMessage} from "element-plus";
import 'element-plus/theme-chalk/el-message.css'
import {publishArticle} from "../../api/user";

const article = reactive({
  title: "",
  content: `健康一直是人们关注的话题，随着生活水平的提高和健康意识的增强，越来越多的人开始注重健康。身体健康是实现个人价值、追求幸福生活的基础，下面就让我们一起来探讨一下健康的重要性以及保持健康的方法。

首先要明确的是，健康不仅仅是没有疾病，更是一种全面的、良好的状态，包括身体、心理和社交等方面。保持身体健康的同时也要注意心理健康和社交健康。

身体健康方面，要想保持健康，首先要合理饮食。适量摄入各种营养成分能够满足人体的需要，营造良好的身体环境。其次，要注意锻炼身体，适当的运动能够促进身体机能和新陈代谢，增强体质。最后，要保持良好的作息，规律的生活方式有利于身体健康。

心理健康同样重要，身体和心理相互影响。为了避免情绪失控，应该尽可能的避免压力和焦虑，采用积极的态度去面对生活和工作。可以尝试放松技巧，如听音乐、运动、呼吸练习等减轻压力。

要维护社交健康同样重要，社交能够缓解孤独感、增进信任感、培养思想观念等。建立良好的社交关系对于个人身心健康都有帮助。在社交中要遵循礼仪、友善和尊重原则，与不同的人相处，学会倾听别人，也让别人倾听自己，建立互相理解和支持的关系。

总之，保持健康需要全面的、系统性的措施，尤其是做好心理调节，建立良好的社交关系。希望大家都能够拥有健康的身体、愉悦的心情和美好的人际关系。`,
  status:""

})
const dialogTitle=ref("发布文章")

const dialogFormVisible =ref( false);

const setting = {
  // 以中文简体为例
  language: 'zh-Hans',
  language_url: '/tinymce/langs/zh-Hans.js',
  height: 880,
  placeholder: "请输入...",
  resize: false,


}
async function publish() {
  if (article.title === "") {
    ElMessage.error("请填写标题 ")
  } else {
    if(dialogTitle.value==="保存草稿"){
      article.status="1"
    }else {
      article.status="0"
    }
    const res = await publishArticle(article)
    if(res.data.code===200){
      dialogFormVisible.value=false
    }
  }


}
</script>

<style>
.buttons {
  position: absolute;
  top: 10%;
  right: 4%;
  z-index: 3;
  width: fit-content;
  height: fit-content;
  display: flex;
  justify-content: right;
  background-color: #fff;
  /* border-radius: 3ch; */
}
</style>

